<template>
	<view v-if="Object.keys(detailsData).length>0"
		style="width: 95%;margin: 10px auto;background-color: #FFFFFF;padding-top: 20px;padding-bottom: 20px;"
		@click="detail()">
		<view>
			<text>被投诉人</text>
			<text style="margin-left: 10px;">{{detailsData.comp_cover_name}}</text>
		</view>
		<view style="float: right;margin-top: -20px;">
			<view class="notice-typePu" v-if="detailsData.comp_handler_state == 1">
				待处理
			</view>
			<view class="notice-type" v-if="detailsData.comp_handler_state == 3">
				已处理
			</view>
			<view class="notice-typeBlue" v-if="detailsData.comp_handler_state == 2">
				处理中
			</view>
		</view>
		<view style="margin-top: 15px;">
			<text>投诉原因</text>
			<view style="color: #999999;margin-top: 8px;">{{detailsData.comp_reason}}</view>
		</view>
		<view style="margin-top: 20px;">
			投诉图片
			<view style="margin-top: 10px;display: flex;">
				<view style="margin: 5px;" v-for="item in detailsData.comp_images" @click="preview(item)">
					<image style="width:200rpx; height:200rpx" class="Main_imgI" :src="item" mode=""></image>
				</view>
			</view>
		</view>
		<view style="margin-top: 15px;">
			<text>处罚</text>
			<text v-if="detailsData.one_handler_result">{{detailsData.one_handler_result}}</text>
			<text v-else-if="detailsData.two_handler_result">{{detailsData.two_handler_result}}</text>
			<text v-else-if="detailsData.three_handler_result">{{detailsData.three_handler_result}}</text>
			<text v-else>{{detailsData.four_handler_result}}</text>
		</view>
		<view style="margin-top: 15px;display: flex;" v-if="detailsData.comp_final_result">
			<view style="width: 66px;color: #999999;">投诉处罚</view>
			<text v-if="detailsData.comp_final_result">满意</text>
			<text v-else>不满意</text>
		</view>
		<view v-if="!detailsData.comp_final_result">
			<view style="margin-top: 30px;">
				<button class="satisfied" @click="satis()">满意</button>
			</view>
			<view style="margin-top: 10px;">
				<button class="direct" @click="navTo()">重新投诉</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailsData: {},
			}
		},
		onLoad(option) {
			if (option) {
				this.handlerGetTableData(option.id)
			}
		},
		methods: {
			//处理获取列表数据
			handlerGetTableData(id) {
				this.$request.api.getComp({
					pageIndex: 1,
					id: id,
					org_id: uni.getStorageSync('projectItem').orgId
				}).then(res => {
					this.detailsData = res.data.data.datalist[0];
				})
			},
			//满意
			satis() {
				this.$request.api.updateComp({
					types: "dsa",
					id: this.detailsData.id,
					comp_final_result: 1,
				}).then(res => {
					this.handlerGetTableData(this.detailsData.id)
					uni.showToast({
						title: "处理成功！",
						success: "200"
					})
				})
			},
			// 图片预览
			preview(item) {
				uni.previewImage({
					urls: [item],
					current: 0,
					longPressActions: {
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//跳转
			navTo() {
				uni.navigateTo({
					url: '/pages/complaint/complaintindex'
				});
			},
		}
	}
</script>

<style>
	.pendingMain_img {
		width: 125px;
		display: flex;
		margin-top: 10px;
	}

	.Main_img {
		flex: 1;
		height: 200rpx;
		padding: 0 20rpx;
	}

	.Main_imgI {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.satisfied {
		width: 80%;
		height: 80rpx;
		background: linear-gradient(180deg, #76D904 0%, #417505 100%);
		border-radius: 44rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 32rpx;
	}

	.direct {
		width: 80%;
		height: 80rpx;
		border: 1px solid #CCCCCC;
		background-color: #FFFFFF;
		border-radius: 44rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.notice-typePu {
		width: 64px;
		height: 40rpx;
		background: linear-gradient(90deg, #ebb15ddb 0%, #f9a832 100%);
		border-radius: 12rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.notice-type {
		width: 64px;
		height: 40rpx;
		background: linear-gradient(90deg, #FF6666 0%, #FD3636 100%);
		border-radius: 12rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 40rpx;
	}

	.notice-typeBlue {
		width: 64px;
		height: 40rpx;
		background: linear-gradient(90deg, #578ae7 0%, #3d7fff 100%);
		border-radius: 12rpx 0;
		text-align: center;
		color: #fff;
		font-size: 24rpx;
		line-height: 40rpx;
	}
</style>